<template>
  <div class="assetDetailsDesc hideScrollBar">
    <!-- 内容部分 -->
    <div class="content">
      <!-- 导航 -->
      <NavBar :title="t('arousalUser.desc.pageTitle')" isTransparent isFixed />
      <!-- 内容 -->
      <div style="padding-top: 20px">
        <div class="content-bg">
          <div v-for="(item, index) in list" :key="index" class="content-box">
            <div class="content-box-img">
              <Images src="/image/pledge/title-icon.svg"></Images>
            </div>
            <div class="text-zw">{{ item }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="assetDetailsDesc">
const { t } = useI18n();
const list = [
  t("arousalUser.desc.text1"),
  t("arousalUser.desc.text2"),
  t("arousalUser.desc.text3"),
  t("arousalUser.desc.text4"),
  t("arousalUser.desc.text5"),
  t("arousalUser.desc.text6"),
  t("arousalUser.desc.text7"),
  t("arousalUser.desc.text8"),
  t("arousalUser.desc.text9"),
  t("arousalUser.desc.text10"),
];
</script>
<style lang="scss" scoped>
.assetDetailsDesc {
  position: relative;
  background-color: #f4f5f7;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;

  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
  padding-bottom: 33 * 2px;

  .content {
    background: linear-gradient(180deg, #96C9FF 0.07%, rgba(226, 236, 255, 0.00) 99.93%);
    // background: linear-gradient(180deg, #ffe7a8 0%, #f4f5f7 100%);
    background-size: 100vh 250 * 2px;
    background-repeat: no-repeat;
    &-bg {
      margin: 0 15 * 2px;
      border-radius: 12 * 2px;
      background-color: #fff;
      padding-bottom: 30px;
    }
    &-box {
      display: flex;
      align-items: flex-start;

      padding: 15 * 2px;
      padding-bottom: 0 * 2px;
      &-img {
        width: 8 * 2px;
        height: 8 * 2px;
        margin-right: 8 * 2px;
        margin-top: 5 * 2px;
      }
    }
  }

  .text {
    &-zw {
      flex: 1;
      color: #141924;
      font-size: 13 * 2px;
      line-height: 18 * 2px;
    }
    &-oneline {
      margin-bottom: 18 * 2px;
    }
  }

  .mb10 {
    margin-bottom: 10 * 2px !important;
  }
}
</style>
